import React from "react";
import { Form, Input, Button, Card,Modal } from "antd";
import { reg, usernameExist } from "../../services/user";
import { useNavigate } from "react-router-dom";

export default function Reg() {
    let navigate = useNavigate();
    const onFinish = async (values) => {
        console.log("Success:", values);
        await reg({username:values.username,pwd:values.pwd});
        Modal.success({
            content: '注册成功',
            onOk(){
                navigate("/login");
            }
        });
    };

    const onFinishFailed = (errorInfo) => {
        console.log("Failed:", errorInfo);
    };

    return (
        <Card title="注册" style={{ width: 500, margin: "auto" }}>
            <Form
                name="reg"
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 20,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: "用户名不能为空",
                        },
                        {
                            pattern: /^\w{6,20}$/,
                            message: "用户名格式不正确",
                        },
                        {
                           async validator(_, value){
                               let data = await usernameExist(value);
                               console.log(data);
                               if(data.status == 1){
                                    return Promise.resolve();
                               }
                               return Promise.reject(new Error("用户名已存在"));
                               
                            }
                        }

                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="pwd"
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: "密码不能为空",
                        },
                        {
                            pattern: /^.{6,}$/,
                            message: "密码格式不正确",
                        }
                        
                    ]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    label="确认密码"
                    name="confirm"
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: "确认密码不能为空",
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (
                                    !value ||
                                    getFieldValue("pwd") === value
                                ) {
                                    return Promise.resolve();
                                }
                                return Promise.reject(
                                    new Error(
                                        "两次密码不一致"
                                    )
                                );
                            },
                        }),
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    );
}
